<template>
  <div class="Login">
    <div class="homepage-hero-module">
      <div class="video-container">
        <div :style="fixStyle" class="filter"></div>
        <video
          autoplay="autoplay"
          loop="loop"
          :style="fixStyle"
          muted="muted"
          class="fillWidth"
          @canplay="canplay"
          src="https://cloud.video.taobao.com//play/u/1057559553/p/2/e/6/t/1/50227372667.mp4"
        ></video>
        <div class="poster hidden" v-if="!vedioCanPlay">
          <img :style="fixStyle" src alt />
        </div>
      </div>
    </div>
    <transition mode="out-in" tag="div">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      vedioCanPlay: false,
      fixStyle: ""
    };
  },
  methods: {
    canplay() {
      this.vedioCanPlay = true;
    }
  },
  mounted: function() {
    this.$nextTick(() => {
      window.onresize = () => {
        const windowWidth = document.body.clientWidth;
        const windowHeight = document.body.clientHeight;
        const windowAspectRatio = windowHeight / windowWidth;
        let videoWidth;
        let videoHeight;
        if (windowAspectRatio < 0.5625) {
          videoWidth = windowWidth;
          videoHeight = videoWidth * 0.5625;
          this.fixStyle = {
            height: windowWidth * 0.5625 + "px",
            width: windowWidth + "px",
            "margin-bottom": (windowHeight - videoHeight) / 2 + "px",
            "margin-left": "initial"
          };
        } else {
          videoHeight = windowHeight;
          videoWidth = videoHeight / 0.5625;
          this.fixStyle = {
            height: windowHeight + "px",
            width: windowHeight / 0.5625 + "px",
            "margin-left": (windowWidth - videoWidth) / 2 + "px",
            "margin-bottom": "initial"
          };
        }
      };
      window.onresize();
    });
  }
};
</script>
<style lang="scss" scoped>
.homepage-hero-module,
.video-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.video-container .poster img,
.video-container video {
  z-index: 0;
  position: absolute;
}

.video-container .filter {
  z-index: 1;
  position: absolute;
  background: rgba(0, 0, 0, 0.4);
}

.v-enter-to {
  opacity: 1;
}
.v-enter {
  opacity: 0;
}
.v-leave-to {
  opacity: 0;
}
.v-leave {
  opacity: 1;
}
.v-leave-active {
  transition: all 0.5s linear;
}
.v-enter-active {
  transition: all 0.5s linear;
}
</style>